<template>
  <a-dropdown :trigger="['click']">
    <a class="ant-dropdown-link" @click.prevent :style="{ minWidth: width }">
      {{ dataSource.find(v => v.value === curValue)?.label }}
      <IconFont type="icon-arrow" :rotate="270" />
    </a>
    <template #overlay>
      <a-menu @click="handleMenuClick" :selectedKeys='[curValue]'>
        <a-menu-item
          v-for="it in dataSource"
          :key="it.value"
        >{{ it.label }}</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script setup lang="ts">
import { IconFont } from '@/components/iconfont'
import { ref } from 'vue'
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [
      {
        label: 'MR.chen',
        value: 1,
      },
      {
        label: 'MR.yangsssss',
        value: 2,
      },
    ],
  },
  width: String,
  curKey: String,
  curValue: [Number, String],
})


const emit = defineEmits(['change', 'update:curValue'])

const show = ref(false)

function handleMenuClick({ key }) {
  if (key === props.curValue) {
    return
  }
  emit('update:curValue', key)
  emit('change', key)
}
</script>
<style lang="less">
@main-color: #fe4b63;
.select-main {
  position: relative;
  display: inline-block;
  .select-current {
    .select-current__text {
      margin-right: 8px;
    }
    .select-current__icon {
      background-color: rgba(44, 44, 44, 0.9);
      border-radius: 2px;
      width: 12px;
      height: 16px;
      font-size: 10px;
      padding: 0 3px;
      line-height: 16px;
    }
  }
  .select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    height: fit-content !important;
    width: fit-content !important;
    transition: all 0.18s linear;
    border-radius: 4px;
    .select-dropdown-inner {
      padding: 4px 0;
      border-radius: 4px;
    }
    .select-dropdown--item {
      background-color: @main-color;
      padding: 8px 24px;
      &:hover {
        background-color: @main-color;
        opacity: 0.8;
      }
    }
  }
  .zero-height {
    opacity: 0;
    overflow: hidden;
    z-index: -1;
  }
}
</style>
